<template>
	<view class="mbti-wifi">
		<mBack ref="mBack" @getGameResult="handleBack"></mBack>
		<view class="mbti-wifi-content" :style="{'padding-top':contentTop+'rpx','background-image': `url(${bgUrl})`}">
			<view class="wifi-top-tip">从列表中选择WiFi连接</view>
			<view class="group-tip">已保存的网络</view>
			<view class="wifi-top-list wifi-list">
				<view class="wifi-item flex-row-start-center" v-for="(item,index) in savedWiFiList" :key="index">
					<view class="wifi-icon">
						<image
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/61002066a2114305ae19349e6047a43f.png"
							class="cover-img" mode="aspectFill" v-if="item.linked"></image>
						<image
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7c948a4eb3264fb8b82fee40314ad30e.png"
							class="cover-img loading-icon" mode="aspectFill" v-if="item.loading"></image>
					</view>
					<view class="item-info flex-row-start-center">
						<view class="wifi-name flex-row-start-center">{{item.SSID}}</view>
						<view class="wifi-control-icon-list flex-row-end-center">
							<image class="wifi-icon-locked control-icon-base"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bf687a8fc0aa4dcb991d3b7410b5282d.png"
								mode="aspectFill" v-if="item.locked"></image>
							<image class="wifi-icon-signal control-icon-base"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bd03f5874faa47f2bbbb662d12b14e58.png"
								mode="aspectFill"></image>
							<image class="control-icon-base wifi-icon-delete"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/963e392ba574491b863e49a7e77b2b0d.png"
								mode="aspectFill" style="margin-right: -6rpx;"></image>
						</view>

					</view>
				</view>
			</view>
			<view class="group-tip">新的网络</view>
			<view class="wifi-bottom-list wifi-list">
				<view class="wifi-item flex-row-start-center" v-for="(item,index) in newWifiList" :key="index"
					@click="handleNewWiFiItemClick(item,index)">
					<view class="wifi-icon">
						<image
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/61002066a2114305ae19349e6047a43f.png"
							class="cover-img" mode="aspectFill" v-if="item.linked"></image>
						<image
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7c948a4eb3264fb8b82fee40314ad30e.png"
							class="cover-img loading-icon" mode="aspectFill" v-if="item.loading"></image>
					</view>
					<view class="item-info flex-row-start-center">
						<view class="wifi-name flex-row-start-center">{{item.SSID}}</view>
						<view class="wifi-control-icon-list flex-row-end-center">
							<image class="wifi-icon-locked control-icon-base"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bf687a8fc0aa4dcb991d3b7410b5282d.png"
								mode="aspectFill" v-if="item.locked"></image>
							<image class="wifi-icon-signal control-icon-base"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bd03f5874faa47f2bbbb662d12b14e58.png"
								mode="aspectFill" style="margin-right: -1rpx;"></image>
						</view>

					</view>
				</view>

				<view class="wifi-item flex-row-start-center" @click="handleWifiOtherClick">
					<view class="wifi-icon">
					</view>
					<view class="item-info flex-row-start-center">
						<view class="wifi-name flex-row-start-center">其他...</view>
					</view>
				</view>
			</view>
		</view>

		<mbtiPop ref="mbtiPop" @confirmValue="handleConfirmValue"></mbtiPop>

	</view>
</template>

<script>
	import mbtiPop from "@/components/m-mbti/mbti-pop.vue"
	import mBack from "@/components/m-back/index.vue"
	export default {
		components: {
			mbtiPop,
			mBack
		},
		data() {
			return {
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d394a848c52a40a0b7fc9baf22ba6a01.png",
				screenWidth: 375,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				contentTop: 300,
				savedWiFiList: [{
						SSID: "你好宝宝",
						password: "",
						locked: true,
						strength: 3, //1、2、3
						linked: true,
						loading: false

					},
					{
						SSID: "凯凯的iphone",
						password: "",
						locked: true,
						strength: 3, //1、2、3
						linked: false,
						loading: true,
					},
				],
				newWifiList: [{
						SSID: "凯宝宝 不吃香菜",
						password: "",
						locked: false,
						strength: 3, //1、2、3
						linked: false,
						loading: false

					},
					{
						SSID: "XINGZAI_2.4G",
						password: "",
						locked: true,
						strength: 3, //1、2、3
						linked: false,
						loading: false
					},
					{
						SSID: "黑鲨5",
						password: "",
						locked: true,
						strength: 3, //1、2、3
						linked: false,
						loading: false
					},
				]
			}
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo

				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop

				this.contentTop = rpxTop + rpxHeight + 72

			} catch (error) {
				//TODO handle the exception
			}
		},
		methods: {
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			handleConfirmValue(e) {
				let {
					data,
					code
				} = e
				if (code == "other") {

				} else if (code == "new") {

				} else if (code == "old") {

				}
			},
			handleBack() {
				uni.navigateBack()
			},
			handleNewWiFiItemClick(item, index) {
				if (item.locked) {
					this.$refs.mbtiPop.open({
						data: [{
							label: "密码",
							value: "",
							type: "label-in",
							valueType: "password",
							isRequire: true,
						}, ],
						title: `输入"${item.SSID}"的密码`,
						code: "new"
					})
				}
			},
			handleWifiOtherClick() {
				this.$refs.mbtiPop.open({
					data: [{
							label: "SSID",
							value: "",
							type: "label-in",
							valueType: "text",
							isRequire: true,
						},
						{
							label: "密码",
							value: "",
							type: "label-in",
							valueType: "password",
							isRequire: true,
						},
					],
					title: "新的WiFi连接",
					code: "other"
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.mbti-wifi {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: #ededed;
		box-sizing: border-box;

		.mbti-wifi-content {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			padding: 0rpx 48rpx;

			.wifi-top-tip {
				width: 100%;
				font-weight: 500;
				font-size: 38rpx;
				color: #153135;
				line-height: 52rpx;
				margin-bottom: 64rpx;

			}

			.group-tip {
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;
				color: #494949;
				line-height: 40rpx;
				margin-bottom: 24rpx;
			}

			.wifi-list {
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 0rpx 28rpx;
				margin-bottom: 52rpx;

				.wifi-item {
					width: 100%;
					height: 104rpx;

					.wifi-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;

					}

					.wifi-control-icon-list {

						.wifi-icon-locked {}

						.wifi-icon-signal {}


						.control-icon-base {
							width: 32rpx;
							height: 32rpx;
							margin-right: 13rpx;
						}

					}

					.loading-icon {
						animation: rotateLoading 2s linear infinite;

						@keyframes rotateLoading {
							0% {
								transform: rotate(0deg);
							}

							100% {
								transform: rotate(360deg);
							}
						}
					}

					.item-info {
						position: relative;
						flex: 1;
						height: 100%;

						&::after {
							content: "";
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 0.5rpx;
							background-color: #ebebeb;
						}

						.wifi-name {
							flex: 1;
							height: 100%;
							font-weight: 400;
							font-size: 32rpx;
							color: #494949;
							line-height: 44rpx;
							text-align: left;
						}

						.wifi-icon {}
					}

					&:last-child {
						.item-info {
							&::after {
								display: none;
							}
						}
					}
				}


			}
		}


	}
</style>